<template>
	<view class="wallet_class" :class="type?'wallet_class_kq':'wallet_class_gb'" v-if="topayPwds">
		<view style="width: 750rpx;height: 100vh;" @tap="toCancel" v-if="keep"></view>
		<view class="wallet_content" :class="type?'wallet_kq':'wallet_gb'" :style="'background-image: url('+keyImg+ ');height:' + height">
			<!-- 当前密码 -->
			<view class="password-show-box" v-if="titleShow">
				<view class="title">
					{{titleText}}
				</view>
				<view class="password-text">
					<view class="password-text-item" v-for="(item,password_index) in password_input" :key="password_index+'-input'">{{item.text}}
					</view>
				</view>
				<view class="password-num" :class="password_input[0].text==''?'height':''">
					<view class="password-num-item" v-for="(item2,password_num_index) in password_num_array" :key="password_num_index+'-number'"></view>
				</view>
			</view>
			<!-- 头部 -->
			<view class="capsule">
				<view class="jp_hea" :style="keyImg?'':'background-color: #f5f5f5'">
					<view :class="keyType=='one'?'jq_key':'jq_key2'">
						<view @touchend="inputPwd(list[1])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[1]"
						 hover-class="click_hover">{{list[1]}}</view>
						<view @touchend="inputPwd(list[2])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[2]"
						 hover-class="click_hover">{{list[2]}}</view>
						<view @touchend="inputPwd(list[3])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[3]"
						 hover-class="click_hover">{{list[3]}}</view>
					</view>
					<view :class="keyType=='one'?'jq_key':'jq_key2'">
						<view @touchend="inputPwd(list[4])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[4]"
						 hover-class="click_hover">{{list[4]}}</view>
						<view @touchend="inputPwd(list[5])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[5]"
						 hover-class="click_hover">{{list[5]}}</view>
						<view @touchend="inputPwd(list[6])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[6]"
						 hover-class="click_hover">{{list[6]}}</view>
					</view>
					<view :class="keyType=='one'?'jq_key':'jq_key2'">
						<view @touchend="inputPwd(list[7])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[7]"
						 hover-class="click_hover">{{list[7]}}</view>
						<view @touchend="inputPwd(list[8])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[8]"
						 hover-class="click_hover">{{list[8]}}</view>
						<view @touchend="inputPwd(list[9])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[9]"
						 hover-class="click_hover">{{list[9]}}</view>
					</view>
					<view :class="keyType=='one'?'jq_key':'jq_key2'">
						<view class="keyboard" style="font-size: 32rpx;font-weight: 500;" @tap="toCancel" :style="keyImg?'':'background-color: #fff'">关闭</view>
						<view @touchend="inputPwd(list[0])" class="keyboard" :style="keyImg?'':'background-color: #fff'" :data-char="list[0]"
						 hover-class="click_hover">{{list[0]}}</view>
						<view @touchend="backspace()" class="keyboard" :style="keyImg?'':'background-color: #fff'" data-char="×"
						 hover-class="click_hover">×</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// **
	// *
	// @backspace 点击回退
	// @inputPwd 返回数据
	// @toCancel 关闭键盘

	// titleText    String              	键盘头部显示信息
	// titleShow    Boolean	    true        键盘头部是否显示
	// passwordNum  String      4/6/8       密码位数
	// is_clear     Boolean     false       是否明文
	// keyType		String		one			键盘样式
	// keep			Boolean		false		点击遮挡是否关闭键盘
	// keyImg		String					键盘背景地址
	// height		String		43vh		键盘高度
	// random		Boolean		false		键盘数字是否打散

	// toOpen		启用支付密码，用法（this.$refs.jpPwds.toOpen()）
	// toCancel	关闭输入框
	// *
	// **
	export default {
		name: 'wallet_category',
		props: {
			titleText: { //键盘头部显示信息
				type: String,
				default: '请输入支付密码'
			},
			titleShow: { //键盘头部是否显示
				type: Boolean,
				default: true
			},
			passwordNum: { //密码数量
				type: Number,
				default: 6
			},
			is_clear: { //是否明文
				type: Boolean,
				default: false
			},
			keyType: { //键盘样式one
				type: String,
				default: 'one'
			},
			keep: { //点击遮挡是否关闭
				type: Boolean,
				default: true
			},
			keyImg: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: '43vh'
			},
			random: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				topayPwds: false,
				type: true,
				list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
				password_input: [],
				password_num_array: [],
				input_order: 0

			}
		},
		created() {
			this.reset()
		},
		mounted() {
			if (this.random) {
				this.list.sort(function() {
					return (0.5 - Math.random());
				});
			}
		},
		watch: {},
		methods: {
			reset() {
				for (let i = 0; i < this.passwordNum; i++) {
					this.password_input[i] = {
						text: '',
						detail: '',
						order: i
					}
					this.password_num_array[i] = {
						order: i
					}
				}
			},
			toOpen() {
				this.input_order = 0
				this.password_input = []
				this.reset()
				if (this.random) {
					this.list.sort(function() {
						return (0.5 - Math.random());
					});
				}
				this.type = true
				this.topayPwds = true;
			},
			toCancel() {
				let taht = this
				this.type = false
				setTimeout(function clock() {
					taht.topayPwds = false;
					taht.$emit('toCancel');
				}, 200)
			},
			inputPwd(e) {
				if (this.is_clear) {
					this.password_input[this.input_order].text = e
				} else {
					this.password_input[this.input_order].text = '●'
				}

				this.password_input[this.input_order].detail = e
				this.input_order += 1
				this.$forceUpdate()
				if (this.input_order == this.passwordNum) {
					let newPassword = ''
					this.password_input.forEach(item => {
						newPassword += item.detail.toString()
					})
					this.$emit('inputPwd', newPassword); /* 小键盘输入 */
					this.toCancel()
				}
			},
			backspace() {
				console.log(this.input_order)
				if (this.input_order >= 1) {
					this.input_order -= 1
					this.password_input[this.input_order].text = ''
					this.password_input[this.input_order].detail = ''
					this.$forceUpdate()
				} else {
					this.toCancel()
				}
				this.$emit('backspace');
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes downIn {
		from {
			transform: translateY(100%);
			opacity: 1;
		}

		to {
			transform: translateY(0vh);
			opacity: 1;
		}
	}

	@keyframes downInClose {
		from {
			transform: translateY(0vh);
			opacity: 1;
		}

		to {
			transform: translateY(100%);
			opacity: 1;
		}
	}

	.wallet_class {
		position: fixed;
		z-index: 9999999;
		height: 100vh;
		width: 750rpx;
		top: 0;
		left: 0;

		.wallet_kq {
			animation: downIn 0.3s;
			-webkit-animation: downIn 0.3s;
		}

		.wallet_gb {
			animation: downInClose 0.3s;
			-webkit-animation: downInClose 0.3s;
		}

		.wallet_content {
			background-size: 100% 100%;
			background-position: top left;
			background-repeat: no-repeat;
			position: fixed;
			bottom: 0rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			width: 750rpx;
			background-color: #fff;

			.password-show-box {
				height: 28%;

				.title {
					text-align: center;
					font-size: 30rpx;
					padding-top: 13rpx;
				}

				.password-text {
					display: flex;
					padding: 0 30rpx;

					.password-text-item {
						flex: 1;
						padding: 0 25rpx;
						text-align: center;
					}
				}

				.password-num {
					display: flex;
					padding: 0 30rpx;

					.password-num-item {
						text-align: center;
						flex: 1;
						margin: 0 10rpx;
						padding: 0 25rpx;
						padding-bottom: 20rpx;
						border-bottom: 2rpx solid #DEDEDE;
					}
				}

				.height {
					height: 72rpx;
				}
			}

			.capsule {
				height: 72%;
				position: relative;

				.jp_hea {
					position: absolute;
					height: 100%;

					.jq_key {
						display: flex;
						justify-content: flex-start;
						height: 17%;

						.keyboard {
							box-sizing: border-box;
							width: 250upx;
							height: 100%;
							line-height: 100%;
							background-color: rgba(255, 255, 255, .3);
							border-top: #f7f4f4 solid 0.1upx;
							border-left: #f7f4f4 solid 0.1upx;
							font-size: 40upx;
							font-weight: 600;
							display: flex;
							justify-content: center;
							align-items: Center;
						}

						.click_hover {
							animation: showPopup 0.1s linear both;
						}
					}

					.jq_key2 {
						display: flex;
						justify-content: flex-start;
						height: 23%;
						padding-top: 1%;
						width: 750rpx;

						.keyboard {
							box-sizing: border-box;
							width: 240upx;
							margin: 0 7rpx;
							border-radius: 20rpx;
							height: 100%;
							line-height: 100%;
							background-color: rgba(255, 255, 255, .3);
							font-size: 40upx;
							font-weight: 600;
							display: flex;
							justify-content: center;
							align-items: Center;
						}

						.click_hover {
							animation: showPopup 0.1s linear both;
						}
					}
				}

				@keyframes showPopup {
					0% {
						opacity: 0;
						background-color: #d8d8d8;
					}

					100% {
						opacity: 1;
					}
				}
			}
		}
	}
</style>
